<% title_tag @note ? @note.title : t(".Not found") %>

<% content_for :subnav do %>
<div class="navbar-wide-mode" style="display: none">
  <a href="#" class="btn btn-wide-mode-exit"><%= t(".Exit Fullscreen") %></a>
</div>
<% end %>

<div class="doc-page note-page d-flex flex-wrap flex-lg-nowrap">
  <div class="doc-center flex-auto">
    <div class="doc-main">

      <div class="navbar-title">
        <span class="hide-sm">
          <%= user_name_tag @user %>
          <span class="divider">/</span>
        </span>
        <%= link_to t(".Notes"), user_notes_path(@user) %>
      </div>
      <h1 class="doc-title">
        <%= @note.title %>
        <% if @note&.private? %>
          <span class="label label-private icon-middle-wrap ml-2"><%= icon_tag("lock") %><%= t(".Private") %></span>
        <% end %>
      </h1>

      <div class="reader-navbar text-main float-right">
        <% if @note %>
        <div class="navbar-buttons">
          <% if can? :read, @note %>
            <%= action_button_tag(@note, :star, icon: "star", class: "btn btn-sm btn-link btn-star-doc") %>
          <% end %>

          <% if can? :update, @note %>
          <%= link_to icon_tag("edit", label: t(".Edit")), edit_user_note_path(@user, @note), class: "btn btn-sm btn-link btn-edit-doc hide-sm ml-1" %>
          <% end %>

          <details class="dropdown details-overlay details-reset d-inline-block ml-2">
            <summary class="link-gray-dark"><%= icon_tag("more") %></summary>
            <ul class="dropdown-menu dropdown-menu-sw">
              <li><a class="dropdown-item" data-close-dialog target="_blank" href="<%= raw_user_note_path(@user, @note) %>"><%= t(".Markdown") %></a></li>
              <% if can? :update, @note %>
                <li><%= render "/docs/export_pdf", doc: @note %></li>
              <% end %>
              <li><a class="dropdown-item btn-print-doc" data-close-dialog href="#"><%= t(".Print document") %></a></li>
              <li class="dropdown-divider" role="separator"></li>
              <li><a class="dropdown-item btn-wide-mode" data-close-dialog href="#"><%= t(".Fullscreen") %></a></li>

              <% if can? :update, @note %>
                <li class="dropdown-divider" role="separator"></li>
                <li><a class="dropdown-item" data-close-dialog href="<%= versions_user_note_path(@user, @note) %>"><%= t(".Versions") %></a></li>
                <li class="dropdown-divider" role="separator"></li>
                <li><a class="dropdown-item" data-close-dialog href="<%= edit_user_note_path(@user, @note) %>"><%= t(".Edit") %></a></li>
              <% end %>

              <% if can? :destroy, @note %>
                <li class="dropdown-divider" role="separator"></li>
                <li class="text-danger"><a class="dropdown-item" data-close-dialog data-method="delete" href="<%= user_note_path(@user, @note) %>" data-confirm="<%= t(".Are you sure delete?") %>"><%= t(".Delete") %></a></li>
              <% end %>
            </ul>
          </details>
        </div>
        <% end %>
      </div>

      <div class="doc-info">
        <%= t(".Last edit by") %> <%= user_name_tag(@note.user) %> <%= t(".edited at") %> <%= timeago @note.body_updated_at %>
      </div>

      <div class="markdown-body markdown-with-toc" data-turbolinks="false">
        <%= raw @note.body_html %>
      </div>

      <div class="doc-reaction note-reaction">
        <%= react_component "reactions/Index", {
          subjectType: "Note",
          subjectId: @note.id,
          reactions: @note.reactions_as_json,
        } %>
      </div>

      <%= render "readers", note: @note, readers: @readers %>

      <% if @between_notes %>
      <div class="between-docs my-4 clearfix">
        <% if @between_notes[:prev] %>
          <%= link_to @between_notes[:prev].title, @between_notes[:prev].to_path, class: "btn-link btn-prev" %>
        <% end %>

        <% if @between_notes[:next] %>
          <%= link_to @between_notes[:next].title, @between_notes[:next].to_path, class: "btn-link btn-next" %>
        <% end %>
      </div>
      <% end %>

      <div class="doc-comments mt-3 clearfix" id="comment">
        <%= react_component "comments/Index", {
          currentUser: current_user&.as_json(only: %i[id slug name avatar_url]),
          commentableType: "Note",
          commentableId: @note.id,
          watchStatus: @note.watch_comment_status_by_user_id(current_user&.id),
          abilities: {
            update: can?(:update, @issue),
            destroy: can?(:destroy, @issue),
          },
        } %>
      </div>
    </div>
  </div>
  <div class="doc-body-toc" data-turbolinks="false"></div>
  </div>
</div>
<%= react_component("QuickScroll") %>
